<template>
    <div class="main-container">
        <navbar title="新闻列表"></navbar>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="(item,i) in news" :key="i">
                <router-link :to="'/newlist/'+item.id">
                    <img class="mui-media-object mui-pull-left" :src="item.imgurl">
                    <div class="mui-media-body">
                        <h1>{{item.title}}</h1>
                        <p class='mui-ellipsis'>
                            <span>{{item.author}}</span>
                            <span>{{item.comment}}</span>
                            <span>{{ item.date | dateFormat }}</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    import NavBar from '../common/navbar.vue'
    export default {
        data() {
            return {
                // 默认的新闻列表
                news: [{
                        id: '2333d',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: '111',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: 'b23d',
                        title: '12321dsacxzcxz',
                        author: '央视网',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '2s3d',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: 'dsa',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '2d3d',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: 'xz',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '232d',
                        title: '23333333333333333',
                        author: '央视网',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '2cer3d',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: '央视网',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '2c3d',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: 'cc',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '2r3bd',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: 'AA',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '2fvd3d',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: '央视网',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '2v3d',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: 'c',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '23vcd',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: 'c',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '23vcxd',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: '央视网',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    },
                    {
                        id: '2yy3d',
                        title: '中国这条高铁被誉为最会赚钱的高铁 像公交车一样5分钟就发一趟',
                        author: '央视网',
                        date: '2018-7-29 13:54:53',
                        comment: '1.5万评',
                        imgurl: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg'
                    }
                ]
            }
        },
        created() {
            this.getNewList();
        },
        methods: {
            getNewList() {
                this.$http.get("api/getnewlist").then(
                    res => {
                        console.log("获取新闻列表成功");
                        console.log(res);
                        if (res.body.status == 0) {
                            this.news = res.body.message;
                        } else {
                            console.log("no");
                        }
                    },
                    res => {
                        console.log("error callback");
                        console.log(res);
                    }
                );
            }
        },
        components: {
            navbar: NavBar
        }

    }
</script>

<style lang="scss" scoped>
    .mui-table-view {
        li {
            h1 {
                font-size: 14px;
            }
            .mui-ellipsis {
                font-size: 12px;
                display: flex;
                justify-content: flex-start;

                span {
                    padding-right: 15px;
                }
            }
        }
    }
</style>